03 Mudando o ambiente com cross-env

Para garantirmos que a mudança da variável de ambiente funcionará em qualquer plataforma, pediremos a ajuda de um módulo do NodeJS. No Terminal, acessaremos a pasta projeto webpack client, depois usaremos o comando npm install para o cross-env:

client caelum$ npm install cross-env@5.0.1 --save-dev

O módulo cross-env nos permite setar as variáveis de ambiente cross platform. Após a instalação, encontraremos o cross-env, abaixo do babili-webpack-plugin no package.json.

 "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-es2017": "^6.24.1",
    "babili-webpack-plugin": "^0.1.1",
    "cross-env": "^5.0.1",
    "webpack": "^3.1.0"
}

Depois, faremos um pequena alteração no build-prod, adicionando cross-env:

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build-dev": "webpack --config webpack.config.js",
    "build-prod": "cross-env NODE_ENV=production webpack  --config webpack.config.js"
},

Quem será responsável por setar a variável de ambiente será cross-env.

Em seguida, de volta ao Terminal, usaremos o seguinte comando:

client caelum$ npm run build-prod

O processo continuará como o esperado, funcionando tanto no Windows como em outros sistemas operacionais. Com isso, resolvemos o problema da minificação no build de produção. No entanto, falta fazer uma melhoria. Estamos usando um servidor disponibilizado por mim para tornar a aplicação acessível - que é um piloto de uma single page application. Mas queremos criar algo com caracter mais professional, usando um servidor consolidado pela comunidade para trabalhar com Webpack em ambiente de desenvolvimento. Veremos isso mais adiante.